<template>
  <a-button type="primary" @click="addRow">添加</a-button>
  <!-- support from v2.25.0  -->
  <a-table :columns="columns" :data="data" style="margin-top: 20px">
    <template v-for="col in columns" #[col.slotName]="{ record, rowIndex }">
      <template v-if="col.slotName === 'secretLevel'">
        <secretLevelSelect
          v-if="record.isEdit"
          :key="col.slotName"
          v-model="record.secretLevel"
          :secret-level="selectBatchRow.secretLevel"
          style="width: 100%"
          @change="(val, obj) => changeSecretLevel(val, obj, record)"
        />
        <template v-else>
          <secretLevelInfo
            :key="col.slotName"
            :record="{
              secretLevel: record.secretLevel,
              secretLevelName: record.secretLevelName,
            }"
          />
        </template>
      </template>
      <template v-else-if="col.slotName === 'operate'">
        <template v-if="record.isEdit">
          <a-button
            :key="col.slotName"
            type="text"
            @click="saveRow(record, rowIndex)"
            >保存</a-button
          >
          <a-button
            :key="col.slotName"
            type="text"
            @click="cancelRow(record, rowIndex)"
            >取消</a-button
          >
        </template>
        <template v-else>
          <a-button
            :key="col.slotName"
            type="text"
            @click="editRow(record, rowIndex)"
            >编辑</a-button
          >
          <a-button
            :key="col.slotName"
            type="text"
            @click="deleteRow(record, rowIndex)"
            >删除</a-button
          >
        </template>
      </template>
      <template v-else>
        <a-input
          v-if="record.isEdit"
          :key="col.slotName"
          v-model="record[col.dataIndex]"
        />
        <template v-else>{{ record[col.dataIndex] }}</template>
      </template>
    </template>
  </a-table>
</template>

<script lang="ts" setup>
  import { inject, reactive, ref } from 'vue';
  import { cloneDeep } from 'lodash';
  import secretLevelInfo from '@/common/components/secret-level-info/index.vue';
  import secretLevelSelect from '@/common/components/cac-components/secret-level-select/index.vue';

  const columns = [
    {
      title: '密级',
      dataIndex: 'secretLevel',
      slotName: 'secretLevel',
    },
    {
      title: '机载软件名称',
      dataIndex: 'softwareName',
      slotName: 'softwareName',
    },
    {
      title: '机载软件版本',
      dataIndex: 'sendVersion',
      slotName: 'sendVersion',
    },
    {
      title: '机载软件安装时间',
      dataIndex: 'installDate',
      slotName: 'installDate',
    },
    {
      title: '机载软件安装单位',
      dataIndex: 'unitCode',
      slotName: 'unitCode',
    },
    {
      title: '项目',
      dataIndex: 'objectDesc',
      slotName: 'objectDesc',
    },
    {
      title: '第1次更改',
      dataIndex: 'firstChange',
      slotName: 'firstChange',
    },
    {
      title: '第2次更改',
      dataIndex: 'secondChange',
      slotName: 'secondChange',
    },
    {
      title: '第3次更改',
      dataIndex: 'thirdChange',
      slotName: 'thirdChange',
    },
    {
      title: '重要记事',
      dataIndex: 'memorobilia',
      slotName: 'memorobilia',
    },
    {
      title: '第1次更改后',
      dataIndex: 'firstChangeAfter',
      slotName: 'firstChangeAfter',
    },
    {
      title: '第2次更改后',
      dataIndex: 'secondChangeAfter',
      slotName: 'secondChangeAfter',
    },
    {
      title: '第3次更改后',
      dataIndex: 'thirdChangeAfter',
      slotName: 'thirdChangeAfter',
    },
    {
      title: '操作',
      dataIndex: 'operate',
      slotName: 'operate',
      width: 180,
    },
  ];
  const selectBatchRow = inject('selectBatchRow');
  const baseData = {
    secretLevelName: null,
    secretLevel: null,
    softwareName: null,
    sendVersion: null,
    installDate: null,
    unitCode: null,
    objectDesc: null,
    firstChange: null,
    secondChange: null,
    thirdChange: null,
    memorobilia: null,
    firstChangeAfter: null,
    secondChangeAfter: null,
    thirdChangeAfter: null,
    isEdit: false,
    id: `${new Date().getTime()}-ID`,
  };
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  let editData = null;
  const data = ref([]);
  const deleteData = reactive([]);
  const addRow = () => {
    data.value.push({
      ...baseData,
    });
  };
  const saveRow = (record) => {
    editData = null;
    record.isEdit = false;
  };
  const cancelRow = (record) => {
    Object.keys(editData).forEach((key) => {
      record[key] = editData[key];
    });
    record.isEdit = false;
  };
  const editRow = (record) => {
    editData = cloneDeep(record);
    record.isEdit = true;
  };
  const deleteRow = (record, rowIndex) => {
    if (!record.id.includes('-ID')) {
      deleteData.push(record);
    }
    data.value.splice(rowIndex, 1);
  };
  const getData = () => {
    return data.value;
  };
  const getUpdateData = () => {
    const list = cloneDeep(data.value || []);
    return list.filter((item) => !item.id.includes('-ID'));
  };
  const getInsertData = () => {
    const list = cloneDeep(data.value || []);
    return list
      .filter((item) => item.id.includes('-ID'))
      .map((item) => {
        delete item.id;
        return item;
      });
  };
  const changeSecretLevel = (val, obj, row) => {
    row.secretLevelName = obj.label;
  };
  const getDeleteData = () => {
    return deleteData;
  };
  const setData = (detailData) => {
    data.value = detailData || [];
  };
  defineExpose({
    getData,
    getUpdateData,
    getInsertData,
    getDeleteData,
    setData,
  });
</script>
